<template>
	<view>
		<loading v-if="0 != loading" :status="loading" />
		<view v-else class="body">
			<!-- <loadingswing v-if="loadingswingShow" /> -->
			<!-- 搜索 -->
			<view class="head-search">
				<view class="search-box">
					<view class="op-box" @tap.stop.prevent="doSearch">
						<icon type="search" size="36rpx" />
					</view>
					<input class="search-input-local" placeholder="请输入商品名称" :disabled="true"
						@tap.stop.prevent="doSearch" />
				</view>
			</view>

			<!-- 分类目录和该目录下的商品 -->
			<view v-if="platformConfig.classifyCss == 1 || util.isEmpty(platformConfig.classifyCss)"
				class="superclass-and-subclass">
				<!-- 左侧大类 -->
				<view class="superclass-content">
					<scroll-view class="classify-list" :scroll-with-animation="true" scroll-y :scroll-top="leftMenuTop">
						<block v-for="(item, index) in classifyParentList" :key="item.id">
							<view class="classify-item" :data-id="item.id" @tap="addActive" :style="
                                    'background-color:' +
                                    (scrollClassifyId == item.id ? '#ffffff' : '#f8f8f8') +
                                    ';color:' +
                                    (scrollClassifyId == item.id ? platformConfig.baseColor : '#666') +
                                    ';font-weight:' +
                                    (scrollClassifyId == item.id ? 'bold' : 'normal')
                                ">
								<!-- <u-skeleton loading="{{skeletonShow}}" row="1" row-width="120rpx"> -->
								<text class="classify-item-text"
									:style="'border-left:8rpx solid ' + (scrollClassifyId == item.id ? platformConfig.baseColor : '#f8f8f8')"
									:data-classifyname="item.classifyName">
									{{ item.classifyName }}
								</text>
								<!-- </u-skeleton> -->
							</view>
						</block>
					</scroll-view>
				</view>
				<!-- /左侧大类 -->
				<!-- 右侧子类 -->
				<scroll-view class="subclass-content" :scroll-y="true" :scroll-into-view="'id' + scrollIntoViewId"
					@scroll="scrollClassifyList">
					<block v-for="(classifyParentItem, index) in classifyParentList" :key="classifyParentItem.id">
						<view class="classify-content" :id="'id' + classifyParentItem.id"
							:style="'margin-top:20rpx;min-height:' + (index + 1 == classifyParentList.length ? 'calc(100% - 100rpx)' : '')">
							<!-- 分类title -->
							<view class="classifyname-view"
								style="flex-direction: column; align-items: flex-start; height: 260rpx">
								<u-skeleton avatar avatar-shape="square" :loading="skeletonShow" row-width="300rpx">
									<image style="width: 510rpx; height: 190rpx" mode="aspectFill"
										:src="util.attachedUrl(classifyParentItem.image, baseUrl)" :lazy-load="true">
									</image>
								</u-skeleton>
								<u-skeleton :loading="skeletonShow" row="1" row-width="100rpx">
									<text class="title"
										style="width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; height: 70rpx; line-height: 70rpx; margin: 0">
										{{ classifyParentItem.classifyName }}
									</text>
								</u-skeleton>
							</view>
							<!-- 分类 -->
							<view class="subclass-list">
								<view class="subclass-item" :data-subclassifyid="item.id"
									:data-subclassifyname="item.classifyName" @tap.stop.prevent="gotoClassifyGoods"
									v-for="(item, index1) in classifyChildList[index]" :key="item.id">
									<u-skeleton avatar avatar-shape="square" :loading="skeletonShow"
										avatar-size="100rpx">
										<image class="subclass-img" :src="baseUrl + '/' + item.image" :lazy-load="true">
										</image>
									</u-skeleton>

									<u-skeleton :loading="skeletonShow" row="1" row-width="80rpx">
										<text class="subclass-name">{{ item.classifyName }}</text>
									</u-skeleton>
								</view>
							</view>
						</view>
					</block>
					<!-- 技术支持 -->
					<!-- <view wx:if='{{"1" == platformConfig.supportSwitch}}' class='type3-support'>
        <text class="type3-support-icon iconfont icon-ums_s_logo"></text>
        <view class="support-content" role="" aria-label="">银联商务提供技术支持</view>
      </view> -->
				</scroll-view>
				<!-- /右侧子类 -->
			</view>

			<!-- 平铺样式 -->
			<view class="container-type2" v-else-if="platformConfig.classifyCss == 2"
				:data-classifyCss="platformConfig.classifyCss">
				<view class="classify-list-type2">
					<view class="classify-item-type2" v-for="(classifyParentItem, index) in classifyParentList"
						:key="classifyParentItem.id">
						<!-- 分类名称 -->

						<view class="classify-title-type2">
							<u-skeleton row="1" row-width="280rpx" :loading="skeletonShow">
								<text class="classify-title-line"></text>
								<text class="title-type2">{{ classifyParentItem.classifyName }}</text>
								<text class="classify-title-line"></text>
							</u-skeleton>
						</view>

						<!-- /分类名称 -->

						<!-- 分类的子类图片和名称 -->

						<view class="subclass-list-type2">
							<view class="subclass-item-type2" :data-subclassifyid="item.id"
								:data-subclassifyname="item.classifyName" @tap.stop.prevent="gotoClassifyGoods"
								v-for="(item, index1) in classifyChildList[index]" :key="item.id">
								<u-skeleton avatar avatar-shape="square" :loading="skeletonShow" avatar-size="140rpx">
									<image class="subclass-img-type2" :src="baseUrl + '/' + item.image"
										:lazy-load="true"></image>
								</u-skeleton>

								<u-skeleton :loading="skeletonShow" row="1" row-width="100rpx">
									<text class="subclass-name-type2">{{ item.classifyName }}</text>
								</u-skeleton>
							</view>
						</view>

						<!-- /分类的子类图片和名称 -->
					</view>
				</view>
				<!-- 技术支持 -->
				<!-- <view wx:if='{{"1" == platformConfig.supportSwitch}}' class="type2-support" role="" aria-label="">
      <text class="support-icon iconfont icon-ums_s_logo">
      </text>
      <view class="support-content" role="" aria-label="">银联商务提供技术支持</view>
    </view> -->
			</view>
			<!-- /平铺样式 -->

			<!-- 商品列表，横向 -->
			<!-- 顶部分类栏 -->
			<view v-else-if="platformConfig.classifyCss == 3"
				style="height: 100vh; padding-bottom: 50px; position: relative; overflow: hidden">
				<view>
					<scroll-view :scroll-left="scrollLeft" :scroll-with-animation="true" :scroll-x="true"
						class="top-category">
						<block v-for="(item, index) in classifyParentList" :key="item.id">
							<view :class="'top-category-item ' + (item.id == activeClassifyParentId ? 'current' : '')"
								:style="item.id == activeClassifyParentId ? 'color:' + platformConfig.baseColor : ''"
								@tap="changeType" :data-index="index" :data-id="item.id">
								{{ item.classifyName }}
								<view v-if="item.id == activeClassifyParentId" class="active-underline"
									:style="'background:' + platformConfig.baseColor"></view>
							</view>
						</block>
					</scroll-view>
				</view>
				<view class="container-type4 superclass-and-subclass">
					<!-- 左侧分类 -->
					<view class="superclass-content">
						<scroll-view class="classify-list" :scroll-with-animation="true" scroll-y
							:scroll-top="leftMenuTop">
							<block v-for="(item, index) in activeClassifyChildList" :key="item.id">
								<view class="classify-item" :data-id="item.id" @tap="addActive" :style="
                                        'background-color:' +
                                        (scrollClassifyId == item.id ? '#ffffff' : '#f7f7f7') +
                                        ';color:' +
                                        (scrollClassifyId == item.id ? platformConfig.baseColor : '#8C8C8C') +
                                        ';font-weight:' +
                                        (scrollClassifyId == item.id ? '600' : 'normal')
                                    ">
									<text class="classify-item-text"
										:style="'border-left:6rpx solid ' + (scrollClassifyId == item.id ? platformConfig.baseColor : '#f7f7f7') + ';'"
										:data-classifyname="item.classifyName">
										{{ item.classifyName }}
									</text>
								</view>
							</block>
						</scroll-view>
					</view>
					<!-- /左侧分类 -->
					<!-- 右侧商品 -->
					<!-- <scroll-view class='subclass-content' scroll-y="true" scroll-into-view="id{{scrollIntoViewId}}" bindscroll="scrollClassifyList"> -->
					<!-- <view class='classify-content' wx:if='{{null != goodsList[index]}}' id='id{{classifyChildItem.id}}' wx:for='{{classifyChildList}}' wx:key='id' wx:for-index="index" wx:for-item="classifyChildItem" style='min-height:{{index+1==classifyChildList.length?"calc(100% - 100rpx)":""}};margin:0 20rpx;'> -->
					<scroll-view class="subclass-content" @scrolltolower="loadMore" :scroll-y="true">
						<view class="classify-content" style="min-height: calc(100% - 100rpx)">
							<!-- 商品 -->
							<view class="goods-list-2">
								<navigator class="goods-item-2"
									:url="'/subPackages/mall/pages/goods/goods?goodsId=' + item.id" v-if="skeletonShow"
									v-for="(item, index) in goodsListForShow" :key="item.id">
									<u-skeleton avatar avatar-shape="square" avatar-size="164rpx"
										:loading="skeletonShow">
									</u-skeleton>

									<view class="goods-info">
										<u-skeleton :loading="skeletonShow" title row="2" row-width="310rpx">
										</u-skeleton>
									</view>
								</navigator>
								<block v-if="goodsList.length > 0">
									<navigator class="goods-item-2"
										:url="item.needPointsMin || item.needPointsMax ? ('/subPackages/pointMallPkg/pages/pointToGoodsDetail/pointToGoodsDetail?exchangeId=' + item.exchangeId) : ('/subPackages/mall/pages/goods/goods?goodsId=' + item.id)"
										v-if="!skeletonShow" v-for="(item, index) in goodsList" :key="item.id">
										<u-skeleton avatar avatar-shape="square" avatar-size="164rpx"
											:loading="skeletonShow">
											<view style="position: relative">
												<image class="goods-img-2" :src="baseUrl + '/' + item.img"
													:lazy-load="true"></image>
												<view v-if="item.rest == 0 || util.isEmpty(item.rest)" class="empty-2">
													<image class="empty-img-2" src="/static/image/empty.png"></image>
												</view>
											</view>
										</u-skeleton>

										<u-skeleton :loading="skeletonShow" title row="2" row-width="330rpx">
											<view class="goods-info">
												<text class="goods-name-2">{{ item.name }}</text>
												<view>
													<text v-if="item.hasDisPrice" class="tag"
														:style="'color:' + platformConfig.baseColor + ';border:1px solid ' + platformConfig.baseColor">
														限时折扣
													</text>
												</view>
												<block v-if="item.hasDisPrice">
													<view class="info-bottom">
														<view class="price-item" v-if="item.needPointsMin || item.needPointsMax" :style="'color:' + platformConfig.baseColor + ';'">
															<text class="goods-price-2" v-if="item.needPointsMax == item.needPointsMin">{{item.needPointsMax}}<text class="pointText"> 积分</text></text>
															<text class="goods-price-2" v-else>{{`${item.needPointsMin} ~ ${item.needPointsMax}`}}<text class="pointText"> 积分</text></text>
														</view>
														<view class="price-item" v-else>
															<text class="goods-price-2"
																:style="'color:' + platformConfig.baseColor + ';'">￥{{ item.disPrice }}</text>
															<text v-if="!util.isEqual(item.oldPrice, item.price)"
																class="goods-oldPrice-2">￥{{ item.price }}</text>
														</view>
														<text v-if="item.rest > 0" @tap.stop.prevent="addGoods"
															:data-discountid="item.discountId" :data-goodsid="item.id"
															:data-hasdisprice="item.hasDisPrice"
															class="iconfont icon-ysgouwuche2"
															:style="'color: ' + platformConfig.baseColor"></text>
													</view>
												</block>
												<block v-else>
													<view class="info-bottom">
														<view class="price-item" v-if="item.needPointsMin || item.needPointsMax" :style="'color:' + platformConfig.baseColor + ';'">
															<text class="goods-price-2" v-if="item.needPointsMax == item.needPointsMin">{{item.needPointsMax}}<text class="pointText"> 积分</text></text>
															<text class="goods-price-2" v-else>{{`${item.needPointsMin} ~ ${item.needPointsMax}`}}<text class="pointText"> 积分</text></text>
														</view>
														<view class="price-item" v-else>
															<text class="goods-price-2"
																:style="'color:' + platformConfig.baseColor + ';'">￥{{ item.price }}</text>
															<text v-if="!util.isEqual(item.oldPrice, item.price)"
																class="goods-oldPrice-2">￥{{ item.oldPrice }}</text>
														</view>
														<text v-if="item.rest > 0 && !(item.exchangeId)" @tap.stop.prevent="addGoods"
															:data-goodsid="item.id" class="iconfont icon-addition_fill"
															:style="'color: ' + platformConfig.baseColor"></text>
													</view>
												</block>
											</view>
										</u-skeleton>
									</navigator>
								</block>
								<block v-else>
									<view class="basic-produce-box-2">
										<image src="/static/image/home_ic_empty@2x.png"></image>
										<view class="tips">商品上架中</view>
									</view>
								</block>
							</view>
							<!-- /商品 -->
						</view>
						<!-- 技术支持 -->
						<!-- <view wx:if='{{"1" == platformConfig.supportSwitch}}' class='type3-support'>
          <text class="type3-support-icon iconfont icon-ums_s_logo"></text>
          <view class="support-content" role="" aria-label="">银联商务提供技术支持</view>
        </view> -->
					</scroll-view>
					<!-- /右侧商品 -->
				</view>
			</view>
			
		</view>

		<!-- 弹框阴影背景 -->
		<view class="shadow-bg" v-if="specInfoShow" @touchmove.stop.prevent="preventTouchMove">
			<view style="flex-grow: 1" @tap.stop.prevent="closeSpecInfo"></view>
			<!-- 商品规格信息 -->
			<view :class="'spec-info ' + (specInfoShow ? 'slideUp' : '')" v-if="specInfoShow">
				<view class="spec-header">
					<view class="spec-line"></view>
				</view>
				<scroll-view style="width: 100%; height: 800rpx" scroll-y>
					<!-- 商品信息 -->
					<view class="spec-goods">
						<image class="spec-goods-img"
							:src="baseUrl + '/' + (goodsDetailInfo != null && !util.isEmpty(goodsDetailInfo.skuImage) ? goodsDetailInfo.skuImage : goodsInfo.images)">
						</image>
						<view class="spec-goods-info">
							<block v-if="hasDisPrice">
								<view class="spec-goods-price" :style="'color:' + platformConfig.baseColor + ';'">
									<!-- parse <template is="money" 
 :data="money:(goodsDetailInfo!=null)?goodsDetailInfo.price:discountGoodsInfo.salePrice,fontSize:36"></template> -->
									<block name="money">
										<view style="display: flex; align-items: baseline; line-height: 1" class="num">
											<text :style="'font-size:' + 30 * 0.7 + 'rpx;'">¥</text>
											<text
												:style="'font-size:' + 30 + 'rpx;'">{{ util.integerMoney((goodsDetailInfo!=null)?goodsDetailInfo.price:discountGoodsInfo.salePrice) }}</text>
											<text
												:style="'font-size:' + 30 * 0.7 + 'rpx;'">{{ util.decimalMoney((goodsDetailInfo!=null)?goodsDetailInfo.price:discountGoodsInfo.salePrice) }}</text>
										</view>
									</block>
								</view>
							</block>
							<block v-else>
								<view class="spec-goods-price" :style="'color:' + platformConfig.baseColor + ';'">
									<!-- parse <template is="money" 
 :data="money:(goodsDetailInfo!=null)?goodsDetailInfo.price:goodsInfo.price,fontSize:36"></template> -->
									<block name="money">
										<view style="display: flex; align-items: baseline; line-height: 1" class="num">
											<text :style="'font-size:' + 30 * 0.7 + 'rpx;'">¥</text>
											<text
												:style="'font-size:' + 30 + 'rpx;'">{{ util.integerMoney((goodsDetailInfo!=null)?goodsDetailInfo.price:goodsInfo.price) }}</text>
											<text
												:style="'font-size:' + 30 * 0.7 + 'rpx;'">{{ util.decimalMoney((goodsDetailInfo!=null)?goodsDetailInfo.price:goodsInfo.price) }}</text>
										</view>
									</block>
								</view>
							</block>

							<text class="spec-vip-price"
								v-if="util.showVipPrice(goodsInfo.openVip, goodsInfo.vipprice)">
								VIP ￥{{ goodsDetailInfo != null ? goodsDetailInfo.vipprice : goodsInfo.vipprice }}
							</text>
							<text
								class="spec-stock">库存：{{ goodsDetailInfo != null ? util.isZero(goodsDetailInfo.rest) : goodsInfo.rest }}</text>
							<view style="line-height: 30rpx">
								<text v-if="!isAllSelected">请选择：</text>
								<text v-if="isAllSelected">已选择：</text>
								<text style="margin-right: 20rpx" v-for="(item, index) in selectText"
									:key="index">{{ item.spec }} {{ item.name }}</text>
							</view>
						</view>
						<!-- /商品信息 -->
					</view>
					<!-- /商品规格信息 -->
					<!-- 规格选择 -->
					<view class="sepc-content" v-for="(specSku, index) in specSku" :key="index">
						<text class="spec-content-title">{{ specSku.spec }}</text>

						<radio-group class="check-content" :data-index="index">
							<label :class="item.checked ? 'checkbox checked' : 'checkbox'"
								@tap="radio(specSku.spec,index1)"
								:style="'background-color: ' + (item.checked ? platformConfig.baseColor : '#F5F5F5')"
								v-for="(item, index1) in specSku.size" :key="item.name">
								<checkbox :value="item.name" :checked="item.checked" />

								{{ item.name }}
							</label>
						</radio-group>
					</view>
					<!-- 数量选择 -->
					<view class="select-num">
						<text>购买数量：</text>
						<view class="num-stepper">
							<text :style="'opacity: ' + (num == 1 ? '0.7' : '1')" class="decodeadd"
								@tap.stop.prevent="minusGoodsNum">-</text>
							<text class="num-text">{{ num }}</text>
							<text :style="'opacity: ' + (num == rest ? '0.7' : '1')" class="decodeadd"
								@tap.stop.prevent="addGoodsNum">+</text>
						</view>
					</view>
				</scroll-view>

				<!-- 购买按钮 -->
				<view v-if="rest > 0" class="btns">
					<button
						:style="'width:100%;color: #fff;padding: 0 !important; background-color: ' + platformConfig.baseColor"
						@tap="addTrolley">加入购物车</button>
				</view>
				<view v-else class="btns">
					<button
						:style="'width:100%;color: #fff;padding: 0 !important; background-color: ' + platformConfig.backgroundColor"
						@tap="closeSpecInfo">
						非常抱歉，暂时无货
					</button>
				</view>
			</view>
		</view>
	</view>
</template>
<script module="util" lang="wxs" src="../../utils/util.wxs"></script>
<script>
	import loading from '@/components/loading/loading';
	const app = getApp();

	var util = require('../../utils/util.js');
	import {
		http
	} from '@/utils/commonRequest.js';

	let menuToTop = [];
	let windowHeight;
	let timeoutId;
	let leftItemHeight;
	export default {
		components: {
			loading,
		},
		data() {
			return {
				scrollLeft: 0,
				loading: 1,

				//加载中
				refreshing: false,

				//刷新中
				baseSize: null,

				//item的单位大小(175rpx)
				baseUrl: app.globalData.baseurl,

				platformConfig: app.globalData.platformConfig,
				classifyParentList: [],

				//父类列表
				classifyParentIndex: {},

				//父类和数组索引对照表
				classifyChildList: [],

				//子类列表
				classifyChildIndex: {},

				//子类和数组索引对照表
				goodsList: [],

				//商品列表
				activeClassifyParentId: '',

				// 当前选中的大类
				activeClassifyChildList: [],

				// 顶部有一级分类时要显示的二级分类列表
				scrollClassifyId: '',

				//当前滚动到的分类
				classifyLength: 0,

				goodsClassifyAllLength: 0,

				//子类的数量
				rest: 0,

				//商品库存
				goodsId: '',

				//商品Id
				detailId: '',

				//商品规格id
				num: 1,

				//商品购买数量
				specInfoShow: false,

				//是否显示规格,
				specSku: [],

				//规格数组
				specSelect: false,

				//规格是否选中
				selectSpecSku: [],

				//已选择的规格数组
				selectText: [],

				//选择的规格文本
				isAllSelected: 0,

				//规格是否选择完毕
				hasDisPrice: false,

				//是否有折扣价,
				currentPage: 1,

				isLoading: false,

				//防止用户不停刷新
				haveMore: true,

				//是否还有更多数据加载
				skeletonShow: true,

				loadingswingShow: true,
				goodsListForShow: [{}, {}, {}, {}, {}, {}, {}],
				trolleyNum: 0,
				activeParentId: '',
				scrollIntoViewId: '',
				leftMenuTop: 0,

				goodsDetailInfo: {
					skuImage: '',
					vipprice: ''
				},

				goodsInfo: {
					images: '',
					vipprice: '',
					rest: ''
				},

				goodsSkuDetailList: '',
				discountGoodsInfo: '',

				classifyParentItem: {
					id: '',
					classifyName: ''
				},
				storeId: ''
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			//分类scrollview总高度
			windowHeight = app.globalData.sysInfo.windowHeight - Math.floor((100 * app.globalData.sysInfo
				.windowWidth) / 750); //左侧分类item高度

			leftItemHeight = Math.floor((110 * app.globalData.sysInfo.windowWidth) / 750);
			console.log(windowHeight);
			console.log(leftItemHeight);
			if (options.storeId) {
				this.storeId = options.storeId
			}
			this.activeParentId = options.id;

			this.platformConfig = app.globalData.platformConfig
			this.activeClassifyParentId = this.activeParentId
			this.scrollLeft = this.scrollLeft
			this.loadData();
			console.log('onShow, platformConfig=', this.platformConfig);
		},
		onShow: function() {	
			this.$checkLogin(res => {
				this.getTrolleyNum();
			})
		},
		/**
		 * 下拉刷新
		 */
		onPullDownRefresh: function() {
			this.loadData();
			uni.stopPullDownRefresh();
		},
		methods: {
			loadData: function() {
				if (this.refreshing) {
					console.log('so fast');
					return;
				}

				this.refreshing = true;
				this.getClassifyParent();
				
			},

			// 获取一级分类列表
			getFirstClassify: function() {},

			//  获取二级分类列表
			getSecondClassify: function() {
				var that = this;
				http.get('shopGoodsInfo/getSecClassifyWithGoods', {})
					.then((res) => {
						res = res.data
						if (200 == res.code) {
							console.log(res);
							let classifyChildList = res.list;
							classifyChildList.map((v) => {
								v.isActive = false;
							});
							classifyChildList[0].isActive = true;
							that.loading = 0
							that.refreshing = false
							that.classifyChildList = classifyChildList
							that.scrollClassifyId = res.list[0].id
							that.currentPage = 1
							that.haveMore = true
							that.loadMore();
						} else {
							console.log(res);
							that.refreshing = false;
							that.loading = -1
						}
					})
					.catch((err) => {
						console.log(err);
						that.refreshing = false;
						that.loading = -1
					});
			},

			// 分页加载
			loadMore: function() {
				console.log('loadMore');
				console.log(!this.haveMore || this.isLoading);
				var that = this;

				if (!this.haveMore || this.isLoading) {
					return;
				}

				that.isLoading = true;
				var params = {
					pageNum: that.currentPage,
					goodsClassifyId2: that.scrollClassifyId
				};
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				if (this.storeId != '') {
					this.$checkLogin().then((res) => {
						params.storeId = that.storeId
						http.get('/shopgoods/getGoodsByStoreId', {
								params: params
							})
							.then((res) => {
								res = res.data
								console.log(res);
								uni.hideLoading();
								setTimeout(function() {
									that.skeletonShow = false
									that.loadingswingShow = false
								}, 100);

								if (that.currentPage == 1) {
									that.goodsList = []
								}

								if ('200' == res.code) {
									if (res.list.length > 0) {
										that.goodsList = that.goodsList.concat(res.list)
									}

									if (res.finished) {
										that.haveMore = false;
									}

									that.currentPage = that.currentPage + 1
								}

								that.isLoading = false;
							})
							.catch((err) => {
								uni.hideLoading();
								that.skeletonShow = false
								that.isLoading = false;
							});
					});
				} else {
					this.$checkLogin().then((res) => {
						http.get('/shopGoodsInfo/getGoodsByPage', {
								params: params
							})
							.then((res) => {
								res = res.data
								console.log(res);
								uni.hideLoading();
								setTimeout(function() {
									that.skeletonShow = false
									that.loadingswingShow = false
								}, 100);

								if (that.currentPage == 1) {
									that.goodsList = []
								}

								if ('200' == res.code) {
									if (res.list.length > 0) {
										that.goodsList = that.goodsList.concat(res.list)
									}

									if (res.finished) {
										that.haveMore = false;
									}

									that.currentPage = that.currentPage + 1
								}

								that.isLoading = false;
							})
							.catch((err) => {
								uni.hideLoading();
								that.skeletonShow = false
								that.isLoading = false;
							});
					});
				}

			},

			/**
			 * 获取父类
			 */
			getClassifyParent: function() {
				let url = ''
				let params = {}
				var that = this;
				if (this.storeId != '') {
					url = '/shopgoods/goodsClassifyParent2'
					params.storeId = this.storeId
				} else {
					url = 'shopgoodsclassify/goodsClassifyParent2'
				}
				http.get(url, {params:params})
					.then((res) => {
						res = res.data
						if (200 == res.code) {
							var classifyParentList = res.list;
							console.log(classifyParentList);
							that.classifyParentList = classifyParentList
							var classifyParentIndex = {};

							for (let i = 0, len = classifyParentList.length; i < len; i++) {
								classifyParentIndex[classifyParentList[i].id] = i;

								if (classifyParentList[i].id == that.activeParentId) {
									console.log(i, '命中的index');

									if (i > 2) {
										that.scrollLeft = (i - 2) * 130 + 'rpx';
									} else {
										that.scrollLeft = 0;
									}
								}
							}

							that.scrollLeft = that.scrollLeft
							that.classifyParentIndex = classifyParentIndex;
							console.log(classifyParentIndex);
							that.getClassifyChild();
						} else {
							console.log(res);
							that.refreshing = false;
							that.loading = -1
						}
					})
					.catch((err) => {
						console.log(err);
						that.refreshing = false;
						that.loading = -1
					});
			},

			/**
			 * 获取子类
			 */
			getClassifyChild: function() {
				var that = this;
				let url = ''
				let params = {}
				if (this.storeId != '') {
					url = '/shopgoods/goodsClassifyChild2'
					params.storeId = this.storeId
				} else {
					url = 'shopgoodsclassify/goodsClassifyChild2'
				}
				http.get(url, {params:params})
					.then((res) => {
						res = res.data
						console.log(res);

						if (200 == res.code) {
							var classifyChildList = [];
							var classifyParentIndex = that.classifyParentIndex;
							var classifyChildListTmp = res.list;

							for (let i = 0, len = classifyChildListTmp.length; i < len; i++) {
								if (0 == classifyChildListTmp[i].parentId) {
									continue;
								}

								var parentIndex = classifyParentIndex[classifyChildListTmp[i].parentId];

								if (undefined == parentIndex) {
									//未查找到父类，脏数据
									continue;
								}

								var classifyChildArr = classifyChildList[parentIndex];

								if (undefined == classifyChildArr) {
									classifyChildArr = [];
									classifyChildList[parentIndex] = classifyChildArr;
								}

								classifyChildArr.push(classifyChildListTmp[i]);
							}

							if (1 == that.platformConfig.classifyCss) {
								var scrollClassifyId = that.scrollClassifyId;

								if (util.isEmpty(scrollClassifyId)) {
									for (let i = 0, len = classifyChildList.length; i < len; i++) {
										if (classifyChildList[i] && classifyChildList[i].length > 0) {
											scrollClassifyId = classifyChildList[i][0].parentId;
											that.setMenuAnimation(i, classifyChildList.length);
											break;
										}
									}
								}

								that.classifyChildList = classifyChildList
								that.scrollClassifyId = scrollClassifyId
								that.loading = 0
								setTimeout(function() {
									that.skeletonShow = false,
										that.loadingswingShow = false
								}, 200);
								that.classifyParentList.forEach((item) => {
									// 添加节点的布局位置的查询请求
									uni.createSelectorQuery()
										.select('#id' + item.id)
										.boundingClientRect((rect) => {
											item.offsetTop = rect.top;
											item.height = rect.height;
										})
										.exec();
								});
								that.refreshing = false;
							} else if (2 == that.platformConfig.classifyCss) {
								that.classifyChildList = classifyChildList
								that.loading = 0
								setTimeout(function() {
									that.skeletonShow = false
									that.loadingswingShow = false
								}, 200);
								that.refreshing = false;
							} else if (3 == that.platformConfig.classifyCss) {
								var activeClassifyParentId = that.activeClassifyParentId;
								var activeClassifyParentIndex = 0;

								if (!activeClassifyParentId || that.classifyParentIndex[activeClassifyParentId] ==
									undefined) {
									that.activeClassifyParentId = that.classifyParentList[0]?.id
								} else {
									activeClassifyParentIndex = that.classifyParentIndex[activeClassifyParentId];
								}

								that.loading = 0
								that.refreshing = false
								that.classifyChildList = classifyChildList
								that.activeClassifyChildList = classifyChildList[activeClassifyParentIndex]
								that.scrollClassifyId = classifyChildList[activeClassifyParentIndex] &&
									classifyChildList[activeClassifyParentIndex].length > 0 ? classifyChildList[
										activeClassifyParentIndex][0].id : undefined
								that.currentPage = 1
								that.haveMore = true
								that.loadMore();
							}
						} else {
							console.log(res);
							that.refreshing = false;
							that.loading = -1
						}
					})
					.catch((err) => {
						console.log(err);
						that.refreshing = false;
						that.loading = -1
					});
			},

			/**
			 * 获取商品
			 */
			getGoodsAll: function() {
				var classifyChildList = this.classifyChildList;
				var classifyChildListNew = [];

				for (let i = 0, len = classifyChildList.length; i < len; i++) {
					if (classifyChildList[i] && classifyChildList[i].length > 0) {
						classifyChildListNew = classifyChildListNew.concat(classifyChildList[i]);
					}
				}

				var classifyChildIndex = {};

				for (let i = 0, len = classifyChildListNew.length; i < len; i++) {
					classifyChildIndex[classifyChildListNew[i].id] = i;
				}

				this.classifyChildIndex = classifyChildIndex;
				var that = this;
				http.get('shopgoodsclassify/goodAllByClassify2', {})
					.then((res) => {
						res = res.data
						if (200 == res.code) {
							console.log(res);
							var goodsList = [];
							var goodsListTmp = res.list;

							for (let i = 0, len = goodsListTmp.length; i < len; i++) {
								var classifyIndex = classifyChildIndex[goodsListTmp[i].goodsClassifyId2];

								if (undefined == classifyIndex) {
									//未查到所属类别，脏数据
									continue;
								}

								var goodsArr = goodsList[classifyIndex];

								if (undefined == goodsArr) {
									goodsArr = [];
									goodsList[classifyIndex] = goodsArr;
								} //如果商品已售罄

								if (goodsListTmp[i].rest == 0 || util.isEmpty(goodsListTmp[i].rest)) {
									goodsArr.push(goodsListTmp[i]);
								} else {
									goodsArr.unshift(goodsListTmp[i]);
								}
							}

							classifyChildListNew = classifyChildListNew.filter((item, index) => {
								return undefined != goodsList[index] && null != goodsList[index];
							});
							goodsList = goodsList.filter((item) => {
								return undefined != item && null != item;
							});

							if (goodsList.length < 1) {
								return;
							}

							var scrollClassifyId = that.scrollClassifyId;

							if (util.isEmpty(scrollClassifyId)) {
								scrollClassifyId = goodsList[0][0].goodsClassifyId2;
							}

							goodsList = goodsList.concat(goodsList);
							that.classifyChildList = classifyChildListNew
							that.goodsList = goodsList
							that.scrollClassifyId = scrollClassifyId
							that.classifyChildList.forEach((item) => {
								// 添加节点的布局位置的查询请求
								uni.createSelectorQuery()
									.select('#id' + item.id)
									.boundingClientRect((rect) => {
										item.offsetTop = rect.top;
										item.height = rect.height;
									})
									.exec();
							});
							that.refreshing = false;
						} else {
							console.log(res);
							that.refreshing = false;
							that.loading = -1
						}
					})
					.catch((err) => {
						console.log(err);
						that.refreshing = false;
						that.loading = -1
					});
			},

			/**
			 * 点击一级分类
			 */
			tabsChange(e) {
				if (e != this.tabsCurrent) {
					this.loadingShow = true;
					this.classId = this.sort.list[e].children[0].id;
					this.isBand = true;
					this.curr = 1;
					this.$store.commit('SORTPRODUCE_SET', []);
					this.getProduceList();
					this.tabsCurrent = app.globalData.curr = e;

					if (app.globalData.curr > 2) {
						this.scrollLeft = (app.globalData.curr - 2) * 130 + 'rpx';
					} else {
						this.scrollLeft = 0;
					}

					this.tabsChildrenCurrent = 0;
					this.showBar = false;
				}
			},

			changeType: function(e) {
				let that = this;
				let classifyChildList = that.classifyChildList;
				let index = e.currentTarget.dataset.index;

				if (index > 2) {
					that.scrollLeft = (index - 2) * 130 + 'rpx';
				} else {
					that.scrollLeft = 0;
				}

				that.activeClassifyParentId = e.currentTarget.dataset.id
				that.activeClassifyChildList = classifyChildList[index] || []
				that.refreshing = false
				that.scrollClassifyId = classifyChildList[index]?.length > 0 ? classifyChildList[index][0].id :
					undefined
				that.currentPage = 1
				that.haveMore = true
				that.scrollLeft = that.scrollLeft
				that.loadMore();
			},

			/**
			 * 点击分类进行切换
			 */
			addActive: function(e) {
				var that = this;

				if (that.platformConfig.classifyCss == '3') {
					that.skeletonShow = true

					that.currentPage = 1
					that.scrollClassifyId = e.currentTarget.dataset.id
					that.haveMore = true
					that.loadMore();
				} else {
					that.scrollIntoViewId = e.currentTarget.dataset.id
					that.scrollClassifyId = e.currentTarget.dataset.id
				}
			},

			// 监听右边商品列表滑动
			scrollClassifyList(e) {
				var that = this;
				var classifyCss = that.platformConfig.classifyCss;
				var data = [];

				if (classifyCss == 1) {
					data = that.classifyParentList;
				} // else if (classifyCss == 3) {
				//   data = that.data.classifyChildList;
				// }

				var temp = 0; //当data[i].offsetTop为负值时，说明是别的页面切换到分类页

				for (var i = 0; i < data.length; i++) {
					if (data[0].offsetTop < 0) {
						//50为右侧商品在初始位置时，距离顶部的距离
						temp = 50 - data[0].offsetTop;
					}

					data[i].offsetTop = temp + data[i].offsetTop;

					if (e.detail.scrollTop > data[i].offsetTop - 65 && e.detail.scrollTop < data[i].offsetTop - 65 + data[
							i].height) {
						that.scrollClassifyId = data[i].id
						that.setMenuAnimation(i, data.length);
					}
				}
			},

			setMenuAnimation(i, len) {
				// 设置动画，使左侧列表滚动到指定位置。
				let self = this;
				var leftItemsHeight = i * leftItemHeight;
				var totalHeight = len * leftItemHeight;

				if (totalHeight <= windowHeight || leftItemsHeight < windowHeight / 2) {
					if (0 != this.leftMenuTop) {
						this.leftMenuTop = 0
					}

					return;
				}

				var maxScroll = totalHeight - windowHeight;
				var leftMenuTop = leftItemsHeight - windowHeight / 2 > maxScroll ? maxScroll : leftItemsHeight -
					windowHeight / 2; // 节流操作

				if (timeoutId) {
					clearTimeout(timeoutId);
				}

				timeoutId = setTimeout(() => {
					console.log(leftMenuTop);
					self.leftMenuTop = leftMenuTop
				}, 300);
			},

			//搜索
			doSearch: function() {
				uni.navigateTo({
					url: '/subPackages/mall/pages/goodsList/goodsList'
				});
			},

			/**
			 * 跳转到分类商品列表页面
			 */
			gotoClassifyGoods: function(event) {
				var classifyId = event.currentTarget.dataset.subclassifyid;
				var classifyName = event.currentTarget.dataset.subclassifyname;
				uni.navigateTo({
					url: '/subPackages/mall/pages/goodsList/goodsList?classifyId=' + classifyId +
						'&classifyName=' + classifyName
				});
			},

			/**
			 * 点击添加图标触发方法
			 */
			addGoods: function(e) {
				var that = this;
				var goodsId = e.currentTarget.dataset.goodsid;
				var hasDisPrice = e.currentTarget.dataset.hasdisprice;

				if (hasDisPrice != undefined) {
					that.hasDisPrice = hasDisPrice
				}

				var discountId = e.currentTarget.dataset.discountid;
				that.loadGoodsInfo(goodsId, hasDisPrice, discountId);
			},

			/**
			 * 展示选择规格
			 */
			goSpecInfo: function(e) {
				var that = this;
				that.specInfoShow = true
				// wx.hideTabBar({});
			},

			/**
			 * 隐藏选择规格
			 */
			closeSpecInfo: function(e) {
				var that = this;
				that.specInfoShow = false
				// wx.showTabBar({});
			},

			/**
			 * 查询商品详情获取商品规格
			 */
			loadGoodsInfo: function(id, hasDisPrice, discountId) {
				var that = this;
				var goodsId = id;
				uni.showLoading({
					title: '加载中'
				});
				that.selectSpecSku = []
				that.selectText = []
				that.goodsDetailInfo = null
				that.isAllSelected = 0
				http.get('shopgoods/goodsInfo', {
						params: {
							id: goodsId
						}
					})
					.then((res) => {
						res = res.data
						if (200 == res.code) {
							if (false === res.goodsExist) {
								uni.redirectTo({
									url: '/pages/goodsFailed/goodsFailed'
								});
								return;
							}

							if ('goodsDown' === res.msg) {
								uni.showToast({
									title: '商品未上架'
								});
							} else {
								var tempInfo = JSON.parse(res.msg);
								var goodsSku = tempInfo.goodsSku;
								var specSku = [];
								var selectText = that.selectText;
								var rest = typeof tempInfo.rest == 'undefined' ? 0 : tempInfo.rest;

								if (rest < 1) {
									return;
								}

								if (JSON.stringify(goodsSku) == '{}') {
									//如果规格数组为空，则根据goodsId查询detailId，直接将商品添加到购物车
									http.get('/shopgoods/goodsDetailId', {
											params: {
												id: goodsId
											}
										})
										.then((res) => {
											res = res.data
											if (200 == res.code) {
												var detailId = res.detailId;
												that.goodsId = goodsId
												that.detailId = res.detailId
												that.rest = 1
												that.isAllSelected = 1
												that.addTrolley();
											}
										});
								} else {
									//规格数组不为空，则将数组重组添加上checked,用来标记是否选中
									for (var item in goodsSku) {
										var str = goodsSku[item];
										var size = [];
										for (var i = 0; i < str.length;) {
											size.push({
												name: str[i],
												checked: false
											});
											i++;

											if (i == str.length) {
												specSku.push({
													spec: item,
													size: size
												});
												selectText.push({
													spec: item,
													name: ''
												});
											}
										}
									}

									that.goodsInfo = JSON.parse(res.msg)
									that.goodsId = goodsId
									that.specSku = specSku
									that.selectText = selectText
									that.rest = rest

									if (hasDisPrice) {
										that.getDiscountGoodsDetailInfo(goodsId, discountId);
									}

									uni.hideLoading();
									that.goSpecInfo();
								}
							}
						} else {
							if (!res.goodsExist) {
								uni.redirectTo({
									url: '/pages/goodsFailed/goodsFailed'
								});
								return;
							}

							uni.hideLoading();
							that.loading = -1
						}
					})
					.catch((err) => {
						uni.hideLoading();
						that.loading = -1
					});
			},

			/**
			 * 选中规格
			 */
			radio: function(spec1, index1) {
				var that = this;
				var index = index1; //获取当前点击的下标

				var spec = spec1; //规格组名称,例：颜色、尺寸

				var specSku = that
					.specSku; //规格选项集合,例[{spec:颜色,size:[{name:红色,checked:false},{name:原谅色,checked:false}],{spec:尺寸,size:{name:大号,checked:false}}]

				var selectSpecSku = that.selectSpecSku; //已经选择了的规格的index数组，例：[0,0]表示选中：红色、大号，[1,0],表示选中：原谅色、大号

				var selectText = that.selectText;
				var isAllSelected = 0;
				var goodsSpec = []; //存放进行选择操作之后的规格选项集合，记录checked状态
				//每次选规格时将选择的购买数量重置

				that.num = 1

				for (var i = 0; i < specSku.length; i++) {
					var checkboxArr = []; //遍历规格数组，当等于当前选择的规格组时，进入方法

					if (specSku[i].spec == spec) {
						checkboxArr = specSku[i].size; //选项集合，例：size:[{name:红色,checked:false},{name:原谅色,checked:false}]

						var tempCheck = checkboxArr[index].checked; //tempCheck为当前点击的规格选择状态
						//因为当个规格只能选择一项，先将所有所有选择状态置为false

						checkboxArr.forEach((item) => {
							item.checked = false;
						}); //将刚才点击的规格的选择状态取反，如果之前是选中，则变为取消选中

						checkboxArr[index].checked = !tempCheck;

						if (checkboxArr[index].checked) {
							//如果为选中状态，则记录该规格的index值
							selectSpecSku[i] = index;
							that.selectSpecSku = selectSpecSku
							selectText[i].name = checkboxArr[index].name;
							console.log(selectText); //当记录已选择规格的数组长度等于 规格数组长度

							if (selectSpecSku.length == specSku.length) {
								//如果不包含标记值 *dex*，表示规格已经选择好了
								if (selectSpecSku.indexOf('*del*') < 0) {
									that.getGoodsDetail();
									that.isAllSelected = 1
									console.log('规格选好了');
								}
							}
						} else {
							selectText[i].name = ''; //如果是取消选中，则插入标记值 *del*

							selectSpecSku[i] = '*del*'; //之前可能已经查询到了goodsDetailInfo和detailId，将其置为null

							that.selectSpecSku = selectSpecSku
							that.goodsDetailInfo = null
							that.rest = that.goodsInfo.rest
							that.isAllSelected = 0
							that.detailId = null
						}
					} //checkboxArr.length == 0 表示没有进入上面的if判断，则specSku[i].size没有变，直接插入

					goodsSpec.push({
						spec: specSku[i].spec,
						size: checkboxArr.length == 0 ? specSku[i].size : checkboxArr
					});
				}

				that.specSku = goodsSpec
				that.selectText = selectText
			},

			/**
			 * 当规格数组不为空时，根据规格查询商品详情
			 */
			getGoodsDetail: function(e) {
				var that = this;
				var selectSpecSku = that.selectSpecSku;
				var goodsId = that.goodsId;
				var arrPosition = ''; //拼接选中的规格index值，例：0-1，1-1

				selectSpecSku.forEach((item) => {
					arrPosition += item + '-';
				});
				arrPosition = arrPosition.substring(0, arrPosition.length - 1);
				var goodsSkuDetailList = that.goodsInfo.goodsSkuDetailList;
				var goodsDetailInfo = goodsSkuDetailList[arrPosition];
				var discountGoodsInfo = that.discountGoodsInfo;
				var rest = goodsDetailInfo.rest;

				if (rest == '' || isNaN(rest) || rest == '0' || rest == '0.00' || rest == undefined) {
					rest = 0;
				}

				that.goodsDetailInfo = goodsDetailInfo
				that.detailId = goodsDetailInfo.detailId
				that.rest = rest
			},

			/**
			 * 调用增加购物车接口
			 */
			addTrolley: function() {
				var that = this;
				var isAllSelected = that.isAllSelected;

				if (isAllSelected != 1) {
					uni.showToast({
						title: '请先选择规格',
						icon: 'none'
					});
					return;
				}

				var id = that.goodsId;
				var detailId = that.detailId;
				var num = that.num;
				http.post('shopTrolley/addTrolley', {
						id: id,
						detailId: detailId,
						num: num
					}, {
						header: {
							"content-type": "application/x-www-form-urlencoded"
						}
					})
					.then((res) => {
						res = res.data
						uni.hideLoading(); // wx.showTabBar({});

						if ('200' == res.code) {
							if (res.msg == 'SUCCESS') {
								uni.showToast({
									title: '成功添加购物车'
								});
								that.specInfoShow = false
								that.getTrolleyNum(); // that.getTrolleyNum();
							} else if (res.msg == 'NOSTOCK') {
								uni.showToast({
									title: '数量超过库存上限，请选择其他规格',
									icon: 'none'
								});
							} else if (res.msg == 'ERROR') {
								uni.showToast({
									title: '该商品库存为0，加入购物车失败',
									icon: 'none'
								});
							} else if (res.msg == 'NO_GOODS') {
								uni.showToast({
									title: '该商品规格已删除，无法加入购物车',
									icon: 'none'
								});
							} else if (res.msg == 'NOT_ENOUGH') {
								uni.showToast({
									title: '商品库存不足，已修改为库存值',
									icon: 'none'
								});
							}
						} else {
							uni.hideLoading(); // wx.showTabBar({});
						}
					});
			},

			getTrolleyNum: function() {
				http.get('shopTrolley/trolleyNum', {}).then((res) => {
					res = res.data
					if ('200' == res.code) {
						console.log('购物车添加数值');
						this.trolleyNum = Number(res.msg)
					}
				}).catch((err) => {
					console.log('购物车==err',err);
				});
			},

			/**
			 * 增加选择商品数量
			 */
			addGoodsNum: function(e) {
				var that = this;
				var isAllSelected = that.isAllSelected;

				if (!isAllSelected) {
					uni.showToast({
						title: '请先选择规格',
						icon: 'none'
					});
					return;
				}

				if (that.checkRestZero(that.rest)) {
					return;
				}

				var goodsNum = this.num;

				if (goodsNum >= that.rest) {
					uni.showToast({
						title: '商品数量超过库存上限',
						icon: 'none'
					});
				} else {
					this.num = ++goodsNum
				}
			},

			/**
			 * 减少选择商品数量
			 */
			minusGoodsNum: function(e) {
				var that = this;
				var isAllSelected = that.isAllSelected;

				if (!isAllSelected) {
					uni.showToast({
						title: '请先选择规格',
						icon: 'none'
					});
					return;
				}

				if (that.checkRestZero(that.rest)) {
					return;
				}

				var goodsNum = that.num;

				if (goodsNum > 1) {
					that.num = --goodsNum
				}
			},

			/**
			 * 检查商品库存是否为0
			 */
			checkRestZero: function(rest) {
				if (rest <= 0) {
					uni.showToast({
						title: '抱歉，该商品库存为0，请选购其它商品',
						icon: 'none',
						duration: 2000
					});
					return true;
				}

				return false;
			},

			/**
			 * 获取限时折扣商品活动详情
			 */
			getDiscountGoodsDetailInfo: function(goodsId, discountId) {
				let that = this;
				http.get('discount/getDisGoodsInfo', {
						params: {
							goodsId: goodsId,
							discountId: discountId
						}
					})
					.then((res) => {
						res = res.data
						if (200 == res.code) {
							let discountGoodsInfo = res.discountGoods;
							let discount = res.discount;
							let goodsSkuDetailList = that.goodsInfo.goodsSkuDetailList;

							if (!util.isEmpty(goodsSkuDetailList)) {
								for (let item in goodsSkuDetailList) {
									var nowprice = 0;

									if ('0' === discountGoodsInfo.discountType) {
										// nowprice = (goodsSkuDetailList[item].price * (parseFloat(discountGoodsInfo.discountValue).toFixed(2)) / 10).toFixed(2);
										nowprice = Math.round((100 * goodsSkuDetailList[item].price *
											discountGoodsInfo.discountValue) / 10) / 100;
									} else if ('1' === discountGoodsInfo.discountType) {
										nowprice = (goodsSkuDetailList[item].price - parseFloat(discountGoodsInfo
											.reduceValue).toFixed(2)).toFixed(2);
									}

									goodsSkuDetailList[item].price = nowprice;
								}
							}

							that.goodsSkuDetailList = goodsSkuDetailList
							that.discountGoodsInfo = discountGoodsInfo
						}
					});
			},

			//阻止背景滚动
			preventTouchMove: function(e) {}
		}
	};
</script>
<style>
	@import '../../iconfont/iconfont.css';
	/* pages/classify/classify.wxss */

	page {
		width: 100%;
		height: 100%;
	}

	.body {
		position: relative;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		height: 100vh;
		overflow: hidden;
		/* padding-bottom: 0rpx; */
	}

	.basic-produce-box-2 {
		width: 100%;
		height: 300rpx;
		margin-top: 100rpx;
	}

	.basic-produce-box-2 image {
		width: 100%;
		height: 100%;
	}

	.head-search {
		height: 100rpx;
		background-color: #fff;
		padding: 22rpx 32rpx 0;
		top: 0;
		left: 0;
		width: 750rpx;
		position: sticky;
		z-index: 100;
	}

	.search-box {
		height: 76rpx;
		border-radius: 60rpx;
		font-size: 26rpx;
		padding: 0 20rpx;
		background-color: #f7f7f7;
		flex-grow: 1;
		display: flex;
		align-items: center;
	}

	.op-box {
		padding: 0 10rpx;
		align-self: stretch;
		display: flex;
		align-items: center;
	}

	.search-input-local {
		flex-grow: 1;
		padding: 0 10rpx;
	}

	.tips {
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		color: #666666;
		margin-bottom: 218rpx;
	}

	/* 一级分类 */
	.top-category {
		width: 750rpx;
		height: 98rpx;
		line-height: 98rpx;
		background-color: #fff;
		width: 100%;
		white-space: nowrap;
		font-size: 28rpx;
		font-weight: 400;
		color: #40434d;
		position: sticky;
		/* top: 100rpx; */
		left: 0rpx;
		z-index: 99;
	}

	.top-category-item {
		flex-shrink: 0;
		padding: 0 24rpx;
		position: relative;
		display: inline-block;
		background-color: #fff;
	}

	.current {
		color: #ff6464;
		font-size: 32rpx;
		font-weight: 600;
	}

	/* .current::after {
  position: absolute;
  content: ' ';
  width: 48rpx;
  height: 6rpx;
  bottom: -20rpx;
  left: 50%;
  transform: translateX(-50%);
  background: #FF5642;
  border-radius: 4rpx;
} */
	.active-underline {
		position: absolute;
		width: 48rpx;
		height: 6rpx;
		bottom: -10rpx;
		left: 50%;
		transform: translateX(-50%);
		background: #ff5642;
		border-radius: 4rpx;
	}

	.superclass-and-subclass {
		display: flex;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.superclass-content {
		width: 180rpx;
		height: 100%;
		flex-shrink: 0;
	}

	.classify-list {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		background: #f7f7f7;
	}

	/*隐藏滚动条*/

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.classify-item {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		overflow: hidden;
		width: 100%;
		height: 88rpx;
		font-size: 26px;
		/* padding: 20rpx 0; */
	}

	.classify-item-text {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding-left: 10rpx;
		width: 100%;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 28rpx;
	}

	.active {
		background-color: #ff537b;
	}

	.subclass-content {
		overflow-y: scroll;
		position: relative;
		height: 100%;
		box-sizing: border-box;
		background-color: white;
		-webkit-overflow-scrolling: touch;
	}

	.classify-content {
		margin: 0 24rpx;
	}

	.classify-content:first-child {
		margin-top: 0 !important;
	}

	.classify-content:last-child {
		min-height: calc(100% - 40rpx);
	}

	/*隐藏滚动条*/

	.subclass-content::-webkit-scrollbar {
		display: none;
	}

	.classifylogo-view {
		display: flex;
		width: 100%;
		height: 200rpx;
		background-color: white;
	}

	#classify-logo {
		width: 100%;
		height: 100%;
	}

	.classifyname-view {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 90rpx;
		font-size: 26rpx;
		/* font-weight: bold; */
		color: #232626;
	}

	.line {
		width: 60rpx;
		height: 2rpx;
		background-color: #232626;
	}

	.title {
		margin: 0 26rpx;
	}

	.subclass-list {
		overflow: auto;
		display: flex;
		flex-wrap: wrap;
		/* padding-top: 42rpx; */
		/* padding-bottom: 100rpx; */
		width: 100%;
		/* max-height: 600rpx; */
		background-color: #fff;
	}

	.subclass-list::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.subclass-item {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		margin-bottom: 10rpx;
		width: 33.3%;
		height: 240rpx;
		font-size: 28rpx;
	}

	.subclass-img {
		width: 140rpx;
		height: 140rpx;
	}

	.subclass-name {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%;
		text-align: center;
		color: #333;
		font-size: 28rpx;
		height: 80rpx;
		line-height: 80rpx;
	}

	/* 平铺样式 */

	.container-type2 {
		overflow: auto;
		height: 100%;
	}

	.classify-list-type2 {
		min-height: calc(100% - 100rpx);
	}

	.classify-item-type2 {
		margin-bottom: 10rpx;
		padding: 10rpx;
		background-color: #fff;
	}

	.classify-title-type2 {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 90rpx;
		font-size: 26rpx;
		color: #333;
	}

	.classify-title-line {
		width: 50rpx;
		height: 2rpx;
		background-color: #999;
	}

	.title-type2 {
		margin: 0 16rpx;
	}

	.subclass-list-type2 {
		display: flex;
		flex-wrap: wrap;
	}

	.subclass-item-type2 {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 25%;
		height: 180rpx;
	}

	.subclass-img-type2 {
		width: 126rpx;
		height: 126rpx;
		border-radius: 4rpx;
	}

	.subclass-name-type2 {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%;
		text-align: center;
		color: #666;
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.type2-support {
		width: 100%;
		color: #666;
		text-align: center;
	}

	/* 商品模式 */

	.goods-list {
		display: flex;
		flex-wrap: wrap;
	}

	.goods-item {
		position: relative;
		display: flex;
		flex-direction: column;
		margin: 6rpx;
		width: 250rpx;
		font-size: 24rpx;
		background: #fff;
		border: 2rpx #eee solid;
		border-radius: 4rpx;
	}

	.goods-img {
		width: 230rpx;
		height: 230rpx;
		margin: 10rpx;
		border-radius: 4rpx;
	}

	.empty {
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 10rpx;
		width: 230rpx;
		height: 230rpx;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 4rpx;
	}

	.empty-img {
		width: 150rpx;
		height: 150rpx;
	}

	.goods-name {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		height: 72rpx;
		line-height: 36rpx;
		padding: 0 20rpx;
	}

	.goods-oldPrice {
		/* margin-top: 10rpx; */
		padding: 0 16rpx;
		line-height: 24rpx;
		color: #666;
		font-size: 20rpx;
		text-decoration: line-through;
	}

	.goods-price {
		margin-top: 4rpx;
		padding: 0 20rpx;
		line-height: 30rpx;
		font-size: 30rpx;
	}

	.goods-salecount {
		margin: 6rpx 0;
		padding: 0 20rpx;
		font-size: 20rpx;
	}

	.type3-support {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100rpx;
		color: #333;
	}

	.type3-support-icon {
		position: relative;
		/* top: 6rpx; */
		font-size: 60rpx !important;
	}

	/* 商品列表，横向 */

	.goods-list-2 {
		display: flex;
		flex-wrap: wrap;
	}

	.goods-item-2 {
		position: relative;
		padding: 30rpx 0;
		display: flex;
		justify-content: space-between;
		width: 100%;
		font-size: 24rpx;
		background: #fff;
		border-bottom: 2rpx #f4f4f4 solid;
	}

	.goods-img-2 {
		flex-shrink: 0;
		width: 164rpx;
		height: 164rpx;
		border-radius: 4rpx;
	}

	.empty-2 {
		position: absolute;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 164rpx;
		height: 164rpx;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 4rpx;
	}

	.empty-img-2 {
		width: 100rpx;
		height: 100rpx;
	}

	.goods-info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 330rpx;
		height: 180rpx;
	}

	.goods-name-2 {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		height: 42rpx;
		line-height: 42rpx;
		font-size: 30rpx;
	}

	.tag {
		padding: 0 4rpx;
		border-radius: 6rpx;
		font-size: 22rpx;
	}

	.info-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 50rpx;
	}

	.price-item {
		display: flex;
		align-items: baseline;
	}

	.goods-price-2 {
		margin-top: 4rpx;
		padding-right: 6rpx;
		line-height: 28rpx;
		font-size: 28rpx;
		font-family: Arial;
	}
	
	.pointText{
		font-size: 20rpx;
		font-weight: 500;
	}

	.goods-oldPrice-2 {
		line-height: 24rpx;
		color: #666;
		font-size: 20rpx;
		text-decoration: line-through;
	}

	.info-bottom .icon-addition_fill {
		line-height: 50rpx;
		font-size: 50rpx;
	}

	/* 规格信息弹出框 */

	.shadow-bg {
		position: fixed;
		left: 0;
		top: 0;
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		background-color: rgba(12, 12, 12, 0.5);
		z-index: 100;
	}

	.spec-info {
		position: relative;
		width: 100%;
		height: 950rpx;
		background-color: #fff;
		box-sizing: border-box;
		border-radius: 50rpx 50rpx 0 0;
	}

	.spec-header {
		display: flex;
		justify-content: center;
		height: 54rpx;
		width: 100%;
		padding-top: 30rpx;
	}

	.spec-line {
		width: 56rpx;
		height: 8rpx;
		background: #d8d8d8;
		border-radius: 7rpx;
	}

	scroll-view::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.spec-title {
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		height: 100rpx;
		font-size: 26rpx;
	}

	.spec-goods {
		display: flex;
		margin-bottom: 40rpx;
		padding: 0 34rpx;
	}

	.spec-goods-img {
		width: 196rpx;
		height: 196rpx;
		border-radius: 4rpx;
	}

	.spec-goods-info {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 30rpx;
		width: 486rpx;
		line-height: 50rpx;
		font-size: 26rpx;
	}

	.spec-goods-price {
		font-size: 32rpx;
	}

	.spec-vip-price {
		width: 200rpx;
		line-height: 40rpx;
		color: yellow;
		font-size: 24rpx;
		text-align: center;
		background: #444;
		border-radius: 20rpx;
	}

	.sepc-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 0 36rpx;
	}

	.spec-content-title {
		font-size: 28rpx;
		font-weight: 500;
		color: #03081a;
		line-height: 40rpx;
	}

	.spec-box {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}

	.check-content {
		display: flex;
		flex-wrap: wrap;
		margin-left: -10rpx;
		padding: 32rpx 0 20rpx;
	}

	.checkbox {
		margin-bottom: 40rpx;
		margin-right: 50rpx;
		padding: 8rpx 32rpx;
		text-align: center;
		font-size: 28rpx;
		color: #555;
		background-color: #eee;
		border-radius: 28rpx;
	}

	.checked {
		color: #fff !important;
	}

	.checkbox checkbox {
		display: none;
	}

	.select-num {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 36rpx 50rpx;
		height: 110rpx;
		font-size: 28rpx;
	}

	.num-stepper {
		display: flex;
		align-items: center;
	}

	.num-stepper .iconfont {
		height: 50rpx;
		font-size: 50rpx;
	}

	.decodeadd {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44rpx;
		height: 44rpx;
		vertical-align: middle;
		border: 2rpx solid #e5e5e5;
		font-size: 40rpx;
		line-height: 40rpx;
		border-radius: 2rpx;
	}

	.num-text {
		width: 64rpx;
		text-align: center;
		border-bottom: 1px solid #e5e5e5;
		border-top: 1px solid #e5e5e5;
		height: 44rpx;
		line-height: 40rpx;
		box-sizing: border-box;
	}

	.btns {
		position: fixed;
		left: 16rpx;
		bottom: 10rpx;
		display: flex;
		align-items: center;
		width: 718rpx;
		height: 80rpx;
		z-index: 102;
	}

	.btns button {
		width: 500rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		border: none;
		border-radius: 44rpx;
	}

	.slideUp {
		animation: slideUp 0.15s 1 linear alternate;
	}

	@keyframes slideUp {
		from {
			bottom: -870rpx;
		}

		to {
			bottom: 0;
		}
	}

	.van-skeleton__row {
		margin: 0 auto;
	}

	.classifyname-view .van-skeleton__avatar {
		height: 190rpx !important;
		width: 460rpx !important;
	}

	.subclass-item .van-skeleton__avatar {
		margin-right: 0 !important;
	}

	.van-skeleton__avatar {
		margin: 0 auto;
		margin-bottom: 10px;
	}

	.subclass-item .van-skeleton__title {
		margin-left: -60rpx;
	}

	.van-skeleton__avatar+.van-skeleton__content {
		width: 0;
	}

	.container-type4 .van-skeleton {
		padding: 0;
	}

	.container-type4 .van-skeleton__row {
		margin: 0;
	}

	.subclass-list-type2 .van-skeleton__avatar {
		margin-right: 0;
	}
</style>
